<template>
	<view class="bind-mobile-page">
		<!-- 返回组件 -->
		<back :showBackText="false" customClass="bg-gradual-blue text-white" title="绑定手机"></back>
		
		<view class="bind-container">
			<!-- 顶部说明 -->
			<view class="header-info">
				<view class="icon-wrapper">
					<text class="cuIcon-mobile icon-mobile"></text>
				</view>
				<view class="title-text">绑定手机号</view>
			</view>
			
			<!-- 法律说明 -->
			<view class="legal-notice text-sm text-gray margin-top-sm">
				根据《网络安全法》及“实名制”要求，绑定手机号是法律规定的实名验证方式，也是保障账号安全的重要措施。
			</view>
			
			<!-- 微信快捷绑定 -->
			<view class="quick-bind-section text-center">
				<button open-type="getPhoneNumber" @getphonenumber="wxPhoneBindTap" 
					class="cu-btn bg-blue lg radius" style="width: 100%;" :disabled="isBinding">
					<view v-if="isBinding" class="loading-spinner"></view>
					<text v-if="!isBinding" class="cuIcon-weixin margin-right-xs"></text>
					{{ isBinding ? '绑定中...' : '一键绑定手机号' }}
				</button>

			</view>
			
			<!-- 绑定好处提示 -->
		<view class="text-sm text-center benefit-text margin-top-sm">
			我们承诺绝不骚扰用户。绑定手机号可提升账号安全性，方便找回密码。
		</view>
			
			<!-- 帮助信息 -->
			<view class="help-section text-center">
				<button class="cu-btn text-gray" @click="contactServiceTap">
					<text class="cuIcon-service"></text>
					<text>遇到问题？请联系客服</text>
				</button>
			</view>
		</view>
	</view>
</template>

<script src="./bindmobile.js"></script>
<style src="./bindmobile.css"></style>